<template>
    <div id="vip">
        <van-tabs sticky scrollspy id="scroll" background="#ddb781" title-active-color="red"
            title-inactive-color="white" title-active-background="white" color="#ddb781">
            <img src="https://hshop.honorfile.com/shopdc/pic/20221031/2/1bf62a43-5da5-4e8c-93cd-b7ce5c604b6d.webp?https://hshop.honorfile.com/shopdc/pic/20221031/0/1bf62a43-5da5-4e8c-93cd-b7ce5c604b6d.jpg"
                alt="">
            <van-tab title="专属礼包">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221031/2/b7fdfe5c-01f7-4e60-836e-4f0bbad96761.webp?https://hshop.honorfile.com/shopdc/pic/20221031/0/b7fdfe5c-01f7-4e60-836e-4f0bbad96761.png"
                    alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221028/2/e9cebfcb-bdf5-4147-8805-6e080b76fccf.webp?https://hshop.honorfile.com/shopdc/pic/20221028/0/e9cebfcb-bdf5-4147-8805-6e080b76fccf.png"
                    alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221031/2/421e9240-272c-4361-b41d-1bf158fe6d41.webp?https://hshop.honorfile.com/shopdc/pic/20221031/0/421e9240-272c-4361-b41d-1bf158fe6d41.png"
                    alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221031/2/f516b00b-cfcd-4229-9daf-beceb4f972e4.webp?https://hshop.honorfile.com/shopdc/pic/20221031/0/f516b00b-cfcd-4229-9daf-beceb4f972e4.png"
                    alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221031/2/cbd7a549-0767-4a06-8d73-6bde9e9cdf59.webp?https://hshop.honorfile.com/shopdc/pic/20221031/0/cbd7a549-0767-4a06-8d73-6bde9e9cdf59.png"
                    alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221031/2/99e6461d-4274-4128-806d-b6020552e778.webp?https://hshop.honorfile.com/shopdc/pic/20221031/0/99e6461d-4274-4128-806d-b6020552e778.png"
                    alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/2022930/2/40e86746-96b4-4495-8034-f3a930e4ac3b.webp?https://hshop.honorfile.com/shopdc/pic/2022930/0/40e86746-96b4-4495-8034-f3a930e4ac3b.jpg"
                    alt="">

                <img src="https://file05.c.hihonor.com/shopdc/pic/202271/0/d134d78d-75bd-4396-84da-60c7ec9c841f.png?https://file05.c.hihonor.com/shopdc/pic/202271/0/d134d78d-75bd-4396-84da-60c7ec9c841f.png"
                    alt="">
                <div id="product">
                    <figure v-for="(v, index) in eduction" :key="index">
                        <img :src="v.url" alt="">
                        <p id="percent">{{ v.percent }}</p>
                        <p id="name">{{ v.name }}</p>
                        <p id="page">{{ v.page }}</p>
                        <p id="price">{{ v.price }}</p>
                    </figure>
                </div>
            </van-tab>
            <van-tab title="教育优惠">
                <img src="https://hshop.honorfile.com/shopdc/pic/202289/0/08cf44e7-cfc2-4a47-ac93-5b9731a8cfb0.png?https://hshop.honorfile.com/shopdc/pic/202289/0/08cf44e7-cfc2-4a47-ac93-5b9731a8cfb0.png" alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/2022730/0/8875d2ed-8e5c-487a-9994-11cdcfc96061.png?https://hshop.honorfile.com/shopdc/pic/2022730/0/8875d2ed-8e5c-487a-9994-11cdcfc96061.png" alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/2022831/0/ed6bf8cc-9144-41e9-ad8c-c2c2b4d72ed0.png?https://hshop.honorfile.com/shopdc/pic/2022831/0/ed6bf8cc-9144-41e9-ad8c-c2c2b4d72ed0.png" alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221112/2/8124c278-3605-4815-aa5e-5a855eff0c67.webp?https://hshop.honorfile.com/shopdc/pic/20221112/0/8124c278-3605-4815-aa5e-5a855eff0c67.png" alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/2022730/0/09d0020b-b8a3-49e6-af20-b5ad42025d02.png?https://hshop.honorfile.com/shopdc/pic/2022730/0/09d0020b-b8a3-49e6-af20-b5ad42025d02.png" alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/2022831/0/a387f53f-e5dd-4b21-8d43-008e33c5e842.png?https://hshop.honorfile.com/shopdc/pic/2022831/0/a387f53f-e5dd-4b21-8d43-008e33c5e842.png" alt="">
                <img src="https://hshop.honorfile.com/shopdc/pic/20221112/2/660e919d-0d5b-4a01-8388-0774dfb5c811.webp?https://hshop.honorfile.com/shopdc/pic/20221112/0/660e919d-0d5b-4a01-8388-0774dfb5c811.png" alt="">
            </van-tab>
            <van-tab title="签到有礼">
                <img src="https://file08.c.hihonor.com/shopdc/pic/202241/91199bb6-2d9b-4f43-a281-7fa8981a3a96.png" alt="">
                <img src="https://file06.c.hihonor.com/shopdc/pic/2021310/7bed4037-c7a5-406f-aa1f-4f63e88bbb9b.png" alt="">
                <img src="" alt="">
            </van-tab>
            <van-tab title="翻牌抽奖">
                <img src="https://file10.c.hihonor.com/shopdc/pic/2021629/c7d49189-fa31-45f0-b29f-0492c718d3c8.png" alt="">
                <div id="choujiang">
                    <div id="pic" v-for="(v,index) in choujiang" :key="index+'c'" @click="start(index)">
                        <img :src="v.img" alt="">
                    </div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script>

export default {
    data() {
        return {
            eduction: [],
            choujiang:[]
        }
    },
    mounted() {
        this.$http({
            url: "  http://localhost:3000/eduction",
            method: "GET"
        }).then((res) => {
            this.eduction = res.data;
        })

        this.$http({
            url: "   http://localhost:3000/choujiang",
            method: "GET"
        }).then((res) => {
            this.choujiang = res.data;
        })
    },
}
</script>

<style scoped lang="scss">
#vip {
    margin-top: 3.125rem;
}

img {
    display: block;
    width: 100%;
}

#product {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

#product figure {
    width: 7.25rem;
    height: 11.5625rem;
    background-color: white;
    padding: .5rem 0;
    margin-bottom: .3125rem;
    border-radius: .1875rem;
    float: left;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#product figure img {
    width: 5.6644rem;
}

#product figure #percent {
    font-size: 12px;
    max-width: 87%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: white;
    background-color: #ddb781;
    border-radius: .375rem;
}

#product figure #name {
    font-size: .7813rem;
    font-weight: 700;
    text-align: center;
}


#product figure #page {
    font-size: .75rem;
    opacity: 0.7;
    text-align: center;
}

#product figure #price {
    font-size: .7813rem;
    font-weight: 700;
    text-align: center;
}

#product figure p {
    margin: .125rem 0;
}

#choujiang{
    width:100%;
    height:19.25rem;
    padding:1.25rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#choujiang #pic img{
    width:6.75rem;
    height:5rem;
    float: left;
}
</style>